<template>
	<view class="box">
		<swiper :vertical="true" :display-multiple-items="6" class="swiper" @transition="onTransition">
			<block v-for="(item, index) in datas" :key="index">
				<swiper-item :style="'height:'+itemHeight[index]">
					<view class="swiper-item">
						<u-image :src="item.base_url" mode="widthFix" class="image"></u-image>
						<view class="mark"></view>
						<view class="title">{{item.title}}</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	import datas from "./data.js";
	export default {
		data(){
			return {
				datas,
				itemHeight: []
			}
		},
		onLoad() {
			// for(let i=0; i<this.datas.length; i++){
			// 	this.itemHeight.push('100%');
			// }
			// this.itemHeight[0] = '460rpx';
		},
		methods: {
			onTransition({detail}){
				// let list = this.itemHeight;
				// let dy = 240 + Math.round(detail.dy);
				// dy <= 240? dy = 240 : '';
				// list[1] = `${dy}rpx`;
				// this.$set(this.itemHeight, list);
				// console.log(this.itemHeight);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		height: 100vh;
		.swiper{
			height: 100%;
			.swiper-item{
				height: 100%;
				position: relative;
				.image{
					height: 100%;
					width: 100%;
					::v-deep .u-image{
						// transform: translateY(-30%);
					}
				}
				.title{
					color: #fff;
					position: absolute;
					top: 0;
					bottom: 0;
					z-index: 2;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.mark{
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					background-color: #000;
					opacity: 0.4;
				}
			}
		}
	}
</style>
